<template>
	<div class="rightmain">
		<div class="title">
			<div class="titleBadge"></div>
			我的预订 <span style="margin-left: 10px;color: #828282;font-size: 13px">(不包含历史预订信息)</span>
		</div>
		<el-form :inline="true" :model="searchFrom" id="searchForm" style="margin-top: 30px">
			<el-form-item label="会议室名称">
				<el-input v-model.trim="name" placeholder="会议室名称"></el-input>
			</el-form-item>
			<el-form-item label="会议室位置">
				<my-cascader
								expand-trigger="hover"
								:options="Locations"
								v-model="searchFrom.location"
								change-on-select
								@showNext="LocationChange"
								placeholder="会议室位置"
								clearable
				></my-cascader>
			</el-form-item>
			<!--<el-form-item label="容纳人数">-->
				<!--<el-input-number v-model="searchFrom.Num" :controls="false" lable="容纳人数"></el-input-number>-->
			<!--</el-form-item>-->
			<el-form-item>
				<el-button type="primary" @click='resetForm' >重置</el-button>
			</el-form-item>
		</el-form>
		<div v-loading="loading">
			<el-table border
							:data="tableData"
							style="width: 100%">
				<el-table-column prop="RoomName" label="会议室名称" align="center"></el-table-column>
				<el-table-column prop="Position" label="会议室位置" align="center"></el-table-column>
				<el-table-column prop="roomName" label="状态" align="center">
					<template slot-scope="scope">
						{{getReserverStatus(scope.row.ReserverStatus)}}
					</template>
				</el-table-column>
				<el-table-column prop="Theme" label="会议主题" align="center"></el-table-column>
				<el-table-column prop="Capacity" label="容纳人数" align="center"></el-table-column>
				<el-table-column prop="Capacity" label="预定类型" align="center">
					<template slot-scope="scope">
						{{getReserverType(scope.row.ReserverType)}}
					</template>
				</el-table-column>
				<el-table-column prop="roomName" label="会议时间" align="center" min-width="220">
					<template slot-scope="scope">
						{{meetingTime(scope.row.BeginTimeStamp,scope.row.EndTimeStamp)}}
					</template>
				</el-table-column>
				<el-table-column prop="roomName" label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="text" v-if="showcanle(scope.row)" @click="Canlce(scope.row,'canlce')">取消会议</el-button>
						<el-button type="text" v-else @click="Canlce(scope.row,'complete')">结束会议</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script type="es6">
import Reserve from '../mixin/Reserve';
import myCommon from '../mixin/myCommon';
import meetingTable from '../mixin/meetingTable';
import API from '@/API';
import myCascader from '../components/myCascader';
export default {
  mixins: [Reserve, myCommon, meetingTable],
  data () {
    return {
      searchFrom: {
        location: []
      },
      name: '',
      tableData: [],
	    loading: false,
	    timer: null
    };
  },
  components: {
    myCascader
  },
  computed: {},
  methods: {
    resetForm () {
      this.name = '';
      this.searchFrom = {
        location: [],
        Num: undefined
      };
    },
    search () {
      this.loading = true;
      let param = {
        Capacity: this.searchFrom.Num,
        RoomName: this.name
      };
      if (this.searchFrom.location.length > 0) {
        param.RegionID = this.searchFrom.location[0];
      }
      if (this.searchFrom.location.length > 1) {
        param.FloorID = this.searchFrom.location[1];
      }
      API.getMyreserverList(param).then((res) => {
        let json = res.data;
        if (json.status === '200') {
          this.loading = false;
          if (json.data) {
            this.tableData = json.data;
          }
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    showcanle (item) {
      if ((Date.now() < item.BeginTimeStamp && item.ReserverStatus === 6) || item.ReserverStatus === 0) {
        return true;
      }
      return false;
    },
    Canlce (row, type) {
      this.loading = true;
      this.Canlcereserver({
        ReserveID: row.ReserveID,
        type: type,
	      callback: () => {
          this.loading = false;
          this.search();
	      }
      });
    }
  },
  mounted () {
    this.initLocations();
  },
  watch: {
    searchFrom: {
      handler (newval) {
        this.search();
      },
      deep: true,
      immediate: true
    },
	  name () {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.search();
      }, 200);
	  }
  }
};
</script>
<style lang="less">
	@import "../../styles/userCommon";
</style>
